<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .point{border-radius: 50%;position: absolute;left:0;top:0;}
        input{position: relative;z-index: 1;}
    </style>
</head>
<body>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="sub">
    <input type="color" id="color">
</body>
<script>
    const add = document.getElementById("add");
    const sub = document.getElementById("sub");
    const color = document.getElementById("color");

    // 宽高变量
    let w = h = 10;
    // 颜色变量
    let c = "#000";

    document.onmousemove = function(eve){
        const e = eve || window.event;
        // 创建元素，设置样式，并插入页面
        const div = document.createElement("div");
        div.className = "point";
        document.body.appendChild(div);

        // 设置元素的动态样式
        div.style.width = w + "px";
        div.style.height = h + "px";
        div.style.background = c;

        // 设置元素位置，跟随鼠标坐标
        div.style.left = e.pageX + "px";
        div.style.top = e.pageY + "px";
    }

    // 点击增加，增加元素的宽高变量
    add.onclick = function(){
        w += 5;
        h += 5;
    }
    
    // 点击减少，减少元素的宽高变量
    sub.onclick = function(){
        // 设置临界点
        if(w <= 5){
            w = h = 5;
        }else{
            w -= 5;
            h -= 5;
        }
    }

    // 修改颜色值，修改元素对应的颜色值变量
    color.onchange = function(){
        c = this.value;
    }
</script>
</html>